﻿<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="robots" content="all">
    <title>校园二手交易</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" th:href="@{/LoginStyle/css/bootstrap.min.css}">

    <!-- Customizable CSS -->
    <link rel="stylesheet" href="assets/css/main.css" th:href="@{/indexStyle/css/main.css}">
    <link rel="stylesheet" href="assets/css/blue.css" th:href="@{/indexStyle/css/blue.css}">
    <link rel="stylesheet" href="assets/css/owl.carousel.css" th:href="@{/indexStyle/css/owl.carousel.css}">
    <link rel="stylesheet" href="assets/css/owl.transitions.css" th:href="@{/indexStyle/css/owl.transitions.css}">
    <link rel="stylesheet" href="assets/css/animate.min.css" th:href="@{/indexStyle/css/animate.min.css}">
    <link rel="stylesheet" href="assets/css/rateit.css" th:href="@{/indexStyle/css/rateit.css}">
    <link rel="stylesheet" href="assets/css/bootstrap-select.min.css"
          th:href="@{/indexStyle/css/bootstrap-select.min.css}">

    <!-- Icons/Glyphs -->
    <link rel="stylesheet" href="assets/css/font-awesome.css" th:href="@{/indexStyle/css/font-awesome.css}">
    <style>
        .pro-des {
            padding-left: 20px;
        }

        .no-flow {
            height: 30px;
            overflow: hidden;
        }
    </style>
</head>

<body class="cnt-home">
<!-- ============================================== HEADER ============================================== -->
<header th:replace="~{user/fragment/IndexHeader:: indexHeader}"></header>

<!-- ============================================== HEADER : END ============================================== -->

<!-- ============================================== HEADER : END ============================================== -->
<div class="breadcrumb">
    <div class="container">
        <div class="breadcrumb-inner">
            <ul class="list-inline list-unstyled">
                <li><a href="#">主页</a></li>
            </ul>
        </div>
        <!-- /.breadcrumb-inner -->
    </div>
    <!-- /.container -->
</div>
<!-- /.breadcrumb -->
<div class="body-content outer-top-xs">
    <div class='container'>
        <div class='row'>
            <!-- /.sidebar -->
            <div class="col-xs-12 col-sm-12 ">
                <!-- ========================================== SECTION – HERO ========================================= -->

                <div class="clearfix filters-container m-t-10">
                    <div class="row">
                        <div class="col col-sm-6 col-md-3 col-lg-3 col-xs-6">
                            <div class="filter-tabs">
                                <ul id="filter-tabs" class="nav nav-tabs nav-tab-box nav-tab-fa-icon">
                                    <li class="active"><a data-toggle="tab" href="#grid-container"><i
                                            class="icon fa fa-th-large"></i>Grid</a></li>
                                    <li><a data-toggle="tab" href="#list-container"><i class="icon fa fa-bars"></i>List</a>
                                    </li>
                                </ul>
                            </div>
                            <!-- /.filter-tabs -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
                <div class="search-result-container ">
                    <div id="myTabContent" class="tab-content category-list">
                        <div class="tab-pane active " id="grid-container">
                            <div class="category-product">
                                <div class="row">
                                    <div class="col-sm-6 col-md-4 col-lg-3" th:each="product:${products}">
                                        <div class="item">

                                            <div class="products">
                                                <div class="product">
                                                    <div class="product-image">
                                                        <div class="image">
                                                            <a href="detail.html"
                                                               th:href="@{|/detail?id=${product.goodsId}|}">
                                                                <img src="assets\images\products\p1.jpg"
                                                                     th:src="@{${product.goodsPicture1}}"
                                                                     th:alt="${product.goodsName}">
                                                                <img src="assets\images\products\p1_hover.jpg"
                                                                     th:src="@{${product.goodsPicture2}}"
                                                                     th:title="${product.goodsName}" class="hover-image">
                                                            </a>
                                                        </div>
                                                        <!-- /.image -->

                                                        <!--                                                            <div class="tag new"><span>new</span></div>-->
                                                    </div>
                                                    <!-- /.product-image -->

                                                    <div class="product-info text-left">
                                                        <h3 class="name no-flow"><a href="detail.html" th:href="@{#}"
                                                                                    th:text="${product.goodsName}">女士大衣</a>
                                                        </h3>
                                                        <div>
                                                            <span>评价:<b
                                                                    th:text="${product.evaluationCount}">0</b></span>
                                                            <span class="pro-des">收藏:<b
                                                                    th:text="${product.collectionCount}">0</b></span>
                                                        </div>
                                                        <div class="product-price"><span class="price"> $<b
                                                                th:text="${product.price}">450.99</b> </span>
                                                            <span class="price-before-discount">$ <b
                                                                    th:text="${product.oldPrice}">800</b></span></div>
                                                        <!-- /.product-price -->

                                                    </div>
                                                    <!-- /.product-info -->
                                                    <div class="cart clearfix animate-effect">
                                                        <div class="action">
                                                            <ul class="list-unstyled" th:id="${product.goodsId}">
                                                                <li class="lnk wishlist" id="addWishlist">
                                                                    <a class="add-to-cart" href="detail.html"
                                                                       title="Wishlist" th:href="@{#}"> <i
                                                                            class="icon fa fa-heart"></i> </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- /.action -->
                                                    </div>
                                                    <!-- /.cart -->
                                                </div>
                                                <!-- /.product -->

                                            </div>
                                            <!-- /.products -->
                                        </div>
                                    </div>
                                    <!-- /.item -->
                                </div>
                                <!-- /.row -->
                            </div>
                            <!-- /.category-product -->

                        </div>
                        <!-- /.tab-pane -->

                        <div class="tab-pane " id="list-container">
                            <div class="category-product">
                                <div class="category-product-inner">
                                    <div class="products">
                                        <div class="product-list product" th:each="product:${products}">
                                            <div class="row product-list-row" >
                                                <div class="col col-sm-3 col-lg-3">
                                                    <div class="product-image">
                                                        <div class="image"><img src="assets/images/products/p3.jpg"
                                                                                th:src="@{${product.goodsPicture1}}"
                                                                                th:title="${product.goodsName}"></div>
                                                    </div>
                                                    <!-- /.product-image -->
                                                </div>
                                                <!-- /.col -->
                                                <div class="col col-sm-9 col-lg-9">
                                                    <div class="product-info">
                                                        <h3 class="name"><a href="detail.html" th:href="@{#}"
                                                                            th:text="${product.goodsName}">一种商品</a>
                                                        </h3>
                                                        <div>
                                                            <span>评价:<b
                                                                    th:text="${product.evaluationCount}">0</b></span>
                                                            <span class="pro-des">收藏:<b
                                                                    th:text="${product.collectionCount}">0</b></span>
                                                        </div>
                                                        <div class="product-price"><span class="price"> $<b
                                                                th:text="${product.price}">450.99</b> </span>
                                                            <span class="price-before-discount">$ <b
                                                                    th:text="${product.oldPrice}">800</b></span>
                                                        </div>
                                                        <!-- /.product-price -->
                                                        <div class="description m-t-10">商品描述:<span
                                                                th:text="${product.goodsDescription}">Suspendisse
                                                            posuere arcu
                                                            diam, id accumsan eros pharetra ac. Nulla enim risus,
                                                            facilisis bibendum gravida eget, lacinia id purus.
                                                            Suspendisse posuere arcu diam, id accumsan eros pharetra
                                                            ac. Nulla enim risus, facilisis bibendum gravida eget.
                                                            Suspendisse posuere arcu diam, id accumsan eros pharetra ac.
                                                            Nulla enim risus, facilisis bibendum gravida eget, lacinia
                                                            id purus. Suspendisse
                                                            posuere arcu diam, id accumsan eros pharetra.</span>
                                                        </div>

                                                        <!-- /.cart -->

                                                    </div>
                                                    <!-- /.product-info -->
                                                </div>
                                                <!-- /.col -->
                                            </div>
                                            <!-- /.product-list-row -->
                                            <div class="tag new"><span>new</span></div>
                                        </div>
                                        <!-- /.product-list -->
                                    </div>
                                    <!-- /.products -->
                                </div>
                                <!-- /.category-product-inner -->
                            </div>
                            <!-- /.category-product -->
                        </div>
                        <!-- /.tab-pane #list-container -->
                    </div>
                    <!-- /.tab-content -->
                    <div class="clearfix filters-container bottom-row">
                        <div class="text-right">
                            <div class="pagination-container">
                                <ul class="pagination" id="pagination1"></ul>
                                <!-- /.list-inline -->
                            </div>
                            <!-- /.pagination-container -->
                        </div>
                        <!-- /.text-right -->
                    </div>
                    <!-- /.filters-container -->
                </div>
                <!-- /.search-result-container -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->

</div>
<!-- /.body-content -->
<div class="breadcrumb">
    <div class="container">
        <div class="breadcrumb-inner">
            <ul class="list-inline list-unstyled">
                <li><a></a></li>
            </ul>
        </div>
        <!-- /.breadcrumb-inner -->
    </div>
    <!-- /.container -->
</div>
<!-- ============================================================= FOOTER ============================================================= -->

<!-- ============================================================= FOOTER ============================================================= -->
<header th:replace="~{user/fragment/IndexFooter.html:: indexFooter}"></header>
<!-- ============================================================= FOOTER : END============================================================= -->

<!-- For demo purposes – can be removed on production -->

<!-- For demo purposes – can be removed on production : End -->

<!-- JavaScripts placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery-1.11.1.min.js" th:src="@{/LoginStyle/js/jquery.min.js}"></script>
<script src="assets/js/bootstrap.min.js" th:src="@{/LoginStyle/js/bootstrap.min.js}"></script>
<script src="assets/js/bootstrap-hover-dropdown.min.js"
        th:src="@{/indexStyle/js/bootstrap-hover-dropdown.min.js}"></script>
<script src="assets/js/owl.carousel.min.js" th:src="@{/indexStyle/js/owl.carousel.min.js}"></script>
<script src="assets/js/echo.min.js" th:src="@{/indexStyle/js/echo.min.js}"></script>
<script src="assets/js/jquery.easing-1.3.min.js" th:src="@{/indexStyle/js/jquery.easing-1.3.min.js}"></script>
<script src="assets/js/bootstrap-slider.min.js" th:src="@{/indexStyle/js/bootstrap-slider.min.js}"></script>
<script src="assets/js/jquery.rateit.min.js" th:src="@{/indexStyle/js/jquery.rateit.min.js}"></script>
<script src="assets/js/lightbox.min.js" th:src="@{/indexStyle/js/lightbox.min.js}"></script>
<script src="assets/js/bootstrap-select.min.js" th:src="@{/indexStyle/js/bootstrap-select.min.js}"></script>
<script src="assets/js/wow.min.js" th:src="@{/indexStyle/js/wow.min.js}"></script>
<script src="assets/js/scripts.js" th:src="@{/indexStyle/js/scripts.js}"></script>
<script src="/js/jqPaginator.js" th:src="@{/indexStyle/js/jqPaginator.js}"></script>
<script th:src="@{/indexStyle/js/indexHeader.js}"></script>
<script th:inline="javascript">

    let flag = [[${flag}]];
    $.jqPaginator('#pagination1', {
        totalPages: [[${pages}]],
        visiblePages: 5,
        currentPage: [[${nowPage}]],
        first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
        prev: '<li class="prev"><a href="javascript:;">前一页</a></li>',
        next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
        last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
        page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
        onPageChange: function (num, type) {
            if (type == "change") {
                if (flag == null) return false;
                else {
                    switch (flag) {
                        case 0:
                            window.location.href = "/?index=" + num;
                            break;
                        case -1:
                            Post("/index/kind", {index: num});
                            break;
                        case 1:
                            Post("/index/search", {index: num});
                            break;
                        default:
                            return false;
                    }
                }
            }
        }
    });

    $(document).ready(function () {


        $("#addWishlist").click(function () {
            let id = $(this).parent("ul").attr("id");
            console.log(id);
            $.post("/User/addWishlist/Data", {id: id}, function (data) {
                if (data == "yes" || data == "no")
                    console.log(data);
                else window.location.replace("/User/Login");
            });
        });

    });
</script>
</body>

</html>